<template>
<div>
  <addFriend v-if="ifAdd === 'true'"></addFriend>
  <div class="friend-detail" v-else-if="friend">
    <div class="detail-card">
      <!-- 头部区域 -->
      <div class="header-section">
        <div class="avatar-container">
          <img :src="friend.avatar" alt="Avatar" class="avatar" />
        </div>
        <div class="info-container">
          <h2 class="friend-name">{{ friend.name }}</h2>
          <p class="friend-remark">备注：{{ friend.remark || '无备注' }}</p>
          <p class="friend-id">账号：{{ friend.friendId }}</p>
        </div>
      </div>
      <!-- 分隔线 -->
      <div class="divider"></div>
      <!-- 操作按钮区域 -->
      <div class="action-buttons">
        <el-button type="primary" @click="sendMessage" class="action-button">
          <i class="fa fa-comment-dots mr-2"></i>发消息
        </el-button>
        <el-button @click="handleShowRemarkPopover" class="action-button">
          <i class="fa fa-pencil mr-2"></i>设置备注
        </el-button>
        <el-popconfirm title="确定删除该好友？" @confirm="deleteFriend" class="action-button">
          <template #reference>
            <el-button type="danger">
              <i class="fa fa-user-times mr-2"></i>删除好友
            </el-button>
          </template>
        </el-popconfirm>
      </div>
      <!-- 备注弹出框 -->
      <el-popover
        :visible="showPopover"
        v-model:visible="showPopover"
        :virtual-ref="remarkButtonRef"
        virtual-triggering
        placement="bottom"
        width="260"
        trigger="click"
        teleported
      >
        <el-input 
          v-model="newRemark" 
          placeholder="请输入备注名称" 
          clearable
        />
        <div class="popover-footer">
          <el-button size="small" @click="cancelSetRemark">取消</el-button>
          <el-button size="small" type="primary" @click="setRemark">确定</el-button>
        </div>
      </el-popover>
    </div>
  </div>
</div>
</template>

<script setup>
import { ref, computed,watch } from 'vue';
import { useRoute,useRouter } from 'vue-router';
import { useFriendStore } from '@/stores/friendStore';
import addFriend from '@/components/friend/addFriend.vue';


const route = useRoute();
const router = useRouter();
const friendStore = useFriendStore();
const friend = computed(() => friendStore.selectedFriend);
const ifAdd = ref(route.query.ifAdd);
const showPopover = ref(false);
const newRemark = ref('');
const remarkButtonRef = ref(null);

watch(()=>route.query.ifAdd,(newVal)=>{
  console.log(newVal);
  ifAdd.value = newVal;
})

const sendMessage = () => {
  router.push({ path: '/chat', query: { friendId: friend.value.friendId } });
};

const setRemark = () => {
  if (newRemark.value.trim()) {
    friend.value.remark = newRemark.value.trim();
  }
  showPopover.value = false;
};

const handleShowRemarkPopover = () => {
  newRemark.value = friend.value.remark || '';
  showPopover.value = true;
};

const cancelSetRemark = () => {
  showPopover.value = false;
  newRemark.value = '';
};

const deleteFriend = () => {
  console.log(`删除好友：${friend.value.friendId}`);
  // 实际项目中需要添加删除逻辑
};
</script>

<style scoped>
.friend-detail {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f5f5f5;
  padding: 20px;
}

.detail-card {
  width: 100%;
  max-width: 420px;
  background-color: #fff;
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: all 0.3s ease;
}

.detail-card:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.header-section {
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.avatar-container {
  margin-bottom: 15px;
  position: relative;
}

.avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.avatar:hover {
  transform: scale(1.05);
}

.friend-name {
  font-size: 22px;
  font-weight: 600;
  color: #303133;
  margin: 0 0 8px 0;
}

.friend-remark, .friend-id {
  font-size: 15px;
  color: #606266;
  margin: 5px 0;
}

.divider {
  height: 8px;
  background-color: #f7f7f7;
  border-top: 1px solid #ebeef5;
  border-bottom: 1px solid #ebeef5;
}

.action-buttons {
  display: flex;
  flex-direction: column;
  padding: 15px;
  align-items: center;
}

.action-button {
  min-width: 140px;
  padding: 10px 15px;
  font-size: 16px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  margin: 8px 0;
}

.action-button:hover {
  transform: translateY(-2px);
}

.action-buttons .el-button--primary {
  background-color: #07c160;
  border-color: #07c160;
}

.action-buttons .el-button--primary:hover {
  background-color: #06a753;
  border-color: #06a753;
}

.action-buttons .el-button--danger {
  background-color: #f56c6c;
  border-color: #f56c6c;
}

.action-buttons .el-button--danger:hover {
  background-color: #e45d5d;
  border-color: #e45d5d;
}

.mr-2 {
  margin-right: 8px;
}

.el-popover {
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.popover-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
</style>